{
  /* <div class="main-content-item"></div> */
}
function createItem(d) {
  var div = document.createElement("div");
  div.className = "main-content-item";
  div.innerHTML = `<a href="http://www.douyin.com.video/${d.videoId}" class="item-cover playing">
              <!-- 所有子元素变绝对定位 -->
              <img src="${d.cover}" alt="" />
              <div class="favor">
                <i class="iconfont icon-zan"></i>
                <span>${d.favor}</span>
              </div>
              <div class="time">${d.time}</div>
              <div class="progress">
                <span></span>
              </div>
            </a>
            <!-- 标题 -->
            <h2 class="item-title">
              ${d.title}
            </h2>
            <!-- 作者 -->
            <div class="item-author">
              <a href="" class="item-name">
                <img src="${d.author.avatar}" alt="">
                <span>${d.author.name}</span>
              </a>
              <span class="data">${d.date}</span>
            </div>`;
  var mainContent = document.querySelector(".main-content");
  mainContent.appendChild(div);
  //鼠标移入播放视频
  var span=div.querySelector('.progress span')
  var vd = new VideoController(d.video, function () {
    console.log(vd.progess);
    // 监听播放、
    span.style.width = vd.progess+'%';
  });
  var itemCover = div.querySelector(".item-cover");
  var isAddVideo = false;

  itemCover.addEventListener("mouseenter", async function () {
    var dom = await vd.play();

    if (!isAddVideo) {
      itemCover.appendChild(dom);
      isAddVideo = true;
    }
    div.classList.add("playing");
  });

  //   鼠标移出停止播放
  itemCover.addEventListener("mouseleave", async function () {
    await vd.pause();
    div.classList.remove("playing");
  });
}

async function init() {
  var data = await fetch("./js/data.json").then((res) => res.json());
  for (const d of data) {
    createItem(d);
  }
}

init();
